<template>
  <page-frame>
    <div class="apply-grant">
      <div class="toptitle">
        <div class="left">补助审核</div>
        <div class="right">
          <div class="btns">
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="apply-grant-main">
        <div class="input">
          <el-row class="query">
            <el-col style="width: 130px;">
              <div class="input-item">
                <el-select style="width:90%!important;" @change="selectItem" @clear="clearItem" v-model="fileId"
                           clearable placeholder="请选择项目">
                  <el-option
                    v-for="item in fileList"
                    :label="item.fileName"
                    :value="item.fileId">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="input-item" v-show="fileId=='1'">
                <el-input v-model="searchData.memberName" placeholder="请输入机构名称">
                </el-input>
              </div>
              <div class="input-item" v-show="fileId=='2'">
                <el-input v-model="searchData.phone" placeholder="请输入法人名称">
                </el-input>
              </div>
              <div class="input-item" v-show="fileId=='3'">
                <el-select v-model="searchData.lidList" @change="loadTableData" placeholder="请选择申请类型">
                  <el-option
                    v-for="item in nursingGradeOptions"
                    :label="item.lname"
                    :value="item.lid">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="2">
              <el-button class="query lightGreenBtn" @click="loadTableData">搜索</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="tabs">
          <el-table
            :data="tableData"
            border
            highlight-current-row
            style="width: 100%">
            <el-table-column
              prop="memberNo"
              label="机构名称"
              min-width="120"
            >
            </el-table-column>
            <el-table-column
              prop="memberName"
              label="法人名称"
              min-width="120"
            >
            </el-table-column>
            <el-table-column
              prop="sex"
              label="联系方式"
              width="130"
            >
            </el-table-column>
            <el-table-column
              prop="age"
              label="详细地址"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="phone"
              label="建筑面积"
              min-width="100"
            >
            </el-table-column>
            <el-table-column
              prop="lid"
              label="标准床位"
              min-width="100"
            >
            </el-table-column>
            <el-table-column
              prop="dateCheckin"
              min-width="100"
              label="申请类型"
            >
            </el-table-column>
            <el-table-column
              prop="urgentContactName"
              label="申请资助合计"
              min-width=""
            >
            </el-table-column>
            <el-table-column
              prop="urgentContactName"
              label="实际发放合计"
              min-width=""
            >
            </el-table-column>
            <el-table-column
              prop="time"
              label="发放日期"
              min-width="140"
            >
            </el-table-column>
            <el-table-column
              prop="urgentContactName"
              label="发放人"
              min-width=""
            >
            </el-table-column>

          </el-table>

          <div class="pagination">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangePage"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  import fileApi from '../../service/member/fileApi';
  import servicePlanApi from '../../service/serManagement/servicePlanApi';
  import {CONSTANT_MEMBER_TYPE_OPTION} from '../../config/constant';
  export default {
    data() {
      return {
        QRCodeStatus: false,
        QRCodeName: '浩龙哥',
        url: "//qr.api.cli.im/qr?data=http%3A%2F%2Fqr02.cn%2FM60azI&level=H&transparent=&bgcolor=%23ffffff&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&size=220&kid=cliim&time=1494332594&key=b08461b03e4de87ed07ab8beb4464f3c",
        fileId: 1,
        CONSTANT_MEMBER_TYPE_OPTION,
        dateCheckin: [],
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        searchData: {
          memberName: '',
          phone: '',
          lidList: [],
          dateCheckinBegin: "",
          dateCheckinEnd: "",
          type: null,
        },
        nursingGradeOptions: [{
          lid: 0,
          lname: "全部"
        },{
          lid: 1,
          lname: "运营补贴"
        }, {
          lid: 2,
          lname: "一次性补贴",
        }, {
          lid: 3,
          lname: "建筑补贴",
        }],
        fileList: [{
          fileId: 1,
          fileName: "机构名称"
        }, {
          fileId: 2,
          fileName: "法人名称",
        }, {
          fileId: 3,
          fileName: "申请类型",
        }],
        tableData: [{
          memberNo:'上海久龄家园',
          memberName:"陈旧领",
          sex:"13608525812",
          age:"上海市长宁区金银花小区1号楼2楼",
          phone:"43平方米",
          lid:"5张",
          dateCheckin:"民办机构运营补贴",
          urgentContactName:"10人",
          time:'2017/10/14 10:43',
        },{
          memberNo:'上海芳草地家园',
          memberName:"王建国",
          sex:"15001745233",
          age:"上海市长宁区中山公园西路100弄3号楼",
          phone:"46平方米",
          lid:"3张",
          dateCheckin:"一次性建筑补贴",
          urgentContactName:"20人",
          time:'2017/10/14 10:43',
        },{
          memberNo:'上海夕阳养老院',
          memberName:"张健",
          sex:"15001742599",
          age:"上海市浦东新区碧波路230号3楼",
          phone:"12平方米",
          lid:"12张",
          dateCheckin:"民办机构运营补贴",
          urgentContactName:"15人",
          time:'2017/10/14 10:43',
        },{
          memberNo:'上海绿地养老院',
          memberName:"孟浩人",
          sex:"18001742366",
          age:"上海市长宁区绿地小区1号楼2楼",
          phone:"43平方米",
          lid:"5张",
          dateCheckin:"民办机构运营补贴",
          urgentContactName:"11人",
          time:'2017/10/14 10:43',
        }],
        total: 4,
        currentPage: 1,
      }
    },
    methods: {
      init(){
//        this.loadTableData();
//        this.getCareLevel();
//        this.judgeType();
      },
      /**
       * 分页查询
       */
      loadTableData(){

      },

      /**
       * 判断会员类型
       */
      judgeType(){
        let self = this;
        for(let i = 0;i<self.tableData.length;i++){
          switch(self.tableData[i].type){
            case 1:
              self.tableData[i].memberType = "外部会员";
              self.tableData[i].checkInStatus = 0;
              break;
            case 2:
              self.tableData[i].memberType = "入住会员(待审核)";
              self.tableData[i].checkInStatus = 1;
              break;
            case 0:
              self.tableData[i].memberType = "入住会员";
              self.tableData[i].checkInStatus = 2;
              break;
          }
        }
      },
      /**
       * 会员建档
       */
      memberFile(){//way:1代表新建档案
        this.$router.push({name: "memberFileInfo", params: {memberId: 0, way: 1}});
      },
      /**
       * 申请入住
       */
      checkIn(val){//入住
        this.$router.push({name: "checkInProcess01", params: {memberId: val, currentType: 'submitApply'}});
      },
      /**
       * 制定服务计划
       */
      makePlan(val){
        this.$router.push({name: "externalMemPlan", params: {memberObj: val}});
      },
      /**
       * 修改
       */
      edit(val){//修改 way:2代表编辑档案
        this.$router.push({name: "memberFileInfo", params: {memberId: val, way: 2}});
      },
      /**
       * 点击查看二维码(操作)
       */
      QRCode(){
        this.QRCodeStatus = true;
      },
      /**
       * 双击查看详情
       */
      handleCurrentChange(val) {//way:0代表查看档案
        this.$router.push({name: "memberFileInfo", params: {memberId: val.memberId, way: 0}});
      },
      /**
       * 选择项目
       */
      selectItem(){
        //清空选项
        this.searchData.memberName = '';
        this.searchData.phone = '';
        this.searchData.lidList = [];
        this.dateCheckin = [];
        this.searchData.type = null;
      },
      /**
       * 清空按钮触发
       */
      clearItem(){
        this.selectItem();
      },
      /**
       * 获得照护等级
       */
      getCareLevel(){
        let self = this;
        servicePlanApi.getCareLevel().then(
          (response) =>{
            self.nursingGradeOptions = response.data.data;
          }
        )
        ;
      },
      /**
       * 分页相关函数
       */
      handleSizeChange(val) {
//        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
//        console.log(`当前页: ${val}`);
//        this.loadTableData();
      },
    },
    mounted: function () {
      this.init();
    },

  }
</script>
<style>

  .input .btns {
    float: none !important;
    display: inline-block;
  }



  .input input {
    display: inline-block;
  }

  .el-pagination {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }


  .apply-grant .apply-grant-main .el-dialog--tiny{
    width:60%!important;
    height: 475px;
    overflow-y: scroll;
  }
  .apply-grant .apply-grant-main .el-dialog__body{

  }
  /*.apply-grant .apply-grant-main .el-dialog .el-input {*/
  /*width: 260%!important;*/

  /*}*/
  .apply-grant .apply-grant-main .el-dialog  .el-input-group{
    display: inline-table!important;
  }
  .apply-grant .apply-grant-main .el-dialog .yue label.el-form-item__label,.apply-grant .apply-grant-main .el-dialog .yue .el-form-item__content{
    width: 50px!important;
  }
  .apply-grant .apply-grant-main .el-dialog .yue .el-input{
    /*width: 260%!important;*/
  }
  .apply-grant .apply-grant-main .el-dialog .yue .el-form-item__content{
    margin-left: 58px!important;
  }
  .apply-grant .apply-grant-main .el-dialog .yue label.el-form-item__label{
    padding:11px 0;
  }
</style>

